<template>
    <div class="edu-page-warp">
        <div class="float-right backStyle">
            <el-button type="text" @click="back"> 返回</el-button>
        </div>
        <div v-loading="loading" class="edu-page-warp" style="padding-top: 20px;">
            <el-card>
                <h2>基本信息</h2>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <div>姓名：{{ studentMessage.studentName }}</div>
                    </el-col>
                    <el-col :span="6">
                        <div>学号：{{ studentMessage.studentId }}</div>
                    </el-col>
                    <el-col :span="6">
                        <div>学院：{{ studentMessage.facultyI18n }}</div>
                    </el-col>
                    <el-col :span="6">
                        <div>专业：{{ studentMessage.professionI18n }}</div>
                    </el-col>
                </el-row>
            </el-card>
            <el-card>
                <hr />
                <el-row :gutter="12" style="margin-bottom: 15px">
                    <el-col :span="3">
                        <div>总平均绩点：<span :class="'isRed'">{{ studentScoreInfo.totalAvgGradePoint }}</span></div>
                    </el-col>
                    <el-col :span="3">
                        <div>实修学分：<span :class="'isRed'">{{ studentScoreInfo.creditPassed }}</span></div>
                    </el-col>
                    <el-col :span="3">
                        <div>不及格学分：<span :class="'isRed'">{{ studentScoreInfo.failingCredits }}</span></div>
                    </el-col>
                    <el-col :span="3">
                        <div>不及格门数：<span :class="'isRed'">{{ studentScoreInfo.failingCourseCount }}</span></div>
                    </el-col>
                </el-row>
                <div v-for="(item, i) in tableList" style="margin-top: 10px;" :key="i">
                    <div style="text-align: center; font-weight: bold;border: 2px solid #ccc; border-bottom: none; height: 32px; font-size: 14px; line-height: 32px; width: 99.9%;">
                        {{ item.calendarYearTermCn }}
                    </div>
                    <el-table :data="item.scoreDetailInfoList" border style="border-left: 2px solid #ccc; border-right: 2px solid #ccc;" stripe :header-cell-style="{background: '#f5f7f9'}" highlight-current-row>
                        <el-table-column label="序号" type="index" width="60" align="center" />
                        <el-table-column label="课程代码" prop="courseCode" show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column label="课程名称" prop="courseName" show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column label="课程类别" prop="courseLabel" show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column label="成绩性质" prop="scoreExamTypeI18n" show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column label="学分" prop="credit" show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column label="绩点" prop="gradePoint" show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column label="成绩" prop="scoreValue" show-overflow-tooltip="true" align="center"></el-table-column>
                        <el-table-column label="是否通过" prop="isPassName" show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">{{ scope.row.isPassName == 1 ? '是' : '否' }}</template>
                        </el-table-column>
                        <el-table-column label="更新时间" prop="importUpdateTime" show-overflow-tooltip="true" align="center"></el-table-column>
                    </el-table>
                    <div style="text-align: left; border: 2px solid #ccc; border-top: none; height: 32px; font-size: 14px; line-height: 32px; width: 99.9%; padding-left: 20px;">
                        本学期平均绩点：{{ item.averagePoint }}
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import api from 'common/src/api/score/bachelor/scoreCheckByAdmin';
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
export default {
    props: {
        studentMessage: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            studentScoreInfo: {
                totalAvgGradePoint: '',
                creditPassed: '',
                failingCredits: '',
                failingCourseCount: ''
            },
            tableList: [],
        }
    },
    mounted() {
        this.getScoreList()
    },
    methods: {
        getScoreList() {
            let param = {
                studentId: this.studentMessage.studentId,
                advancedLevelCode: ''
            }
            scoreManagementApi.getListPage(param).then(res => {
                if (res.code === 200 && res.data != null) {
                    for (let key in this.studentScoreInfo) {
                        this.studentScoreInfo[key] = res.data[key]?res.data[key] : 0
                    }
                    this.tableList = res.data.scoreDetailList
                }
            })
        },
        back(){
           this.$emit('back')
        },
    },
}
</script>
<style lang="scss" scoped>
.tableMarginTop {
    clear: both;
    position: relative;
    top: 20px;
}
.borderStyle {
    border: 1px solid #dadcde;
    border-bottom: none;
    text-align: center;
    height: 40px;
    line-height: 40px;
}
.isRed {
    color: red;
}
.numStyle {
    display: inline-block;
    height: 16px;
    width: 16px;
    font-size: 10px;
    line-height: 16px;
    border: 1px solid red;
    margin-right: 2px;
    text-align: center;
    border-radius: 8px;
}
.backStyle{
  margin-top: -13px;
  margin-right:30px;
}
</style>

